<template>
  <div class="mr-root">
    <back-header>
      <p class="title">
        {{this.$route.params.roomName}}
      </p>
    </back-header>
    <div class="mr-content" v-for="room in this.roomList">
      <div class="content-header">
        <span>{{room.cate_name}}</span>
        <span>{{room.room_id}}</span>
        <span>{{status}}</span>
        <img :src="room.owner_avatar" alt="">
      </div>
      <div class="main">
        <img :src="room.room_thumb" alt="">
        <span>{{room.online |number}}</span>
      </div>
      <div v-for="gi in room.gift" class="gift">
        <img :src="gi.himg" alt="">
        {{gi.name}}{{gi.pc}}
      </div>
    </div>
  </div>
</template>

<script>
  import BackHeader from "../components/BackHeader"
  export default {
    data() {
      return {
        roomList: [],
        status: " "
      }
    },
    components: {
      BackHeader
    },
    created() {
      this.axios.get(`/douyuapi/RoomApi/room/${this.$route.params.roomId}`)
        .then(data => {
          this.roomList = this.roomList.concat(data.data.data)
          this.status = this.roomList[0].room_status
          this.status = this.status == 1 ? "直播中" : "休息中"
          //  console.log(this.roomList[0].owner_name)
          // console.log(data)
    
        })
        .catch(err => {
          console.log(err)
        })



    },
    methods: {

    }
  }

</script>

<style scoped>
  .gift{
    float: left;
    margin: 10px;
  }

</style>
